<script setup lang="ts">
import { reactive, ref } from "vue";
import { UserControllerService, UserLoginRequest } from "../../generated";
import { useUser } from "@/store/user";
import { storeToRefs } from "pinia";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { computed } from "vue";

const form = reactive({
  userAccount: "",
  userPassword: "",
} as UserLoginRequest);
let user = useUser();
let { loginUser, defaultRoutes } = storeToRefs(useUser());
const isRead = ref(false);
const router = useRouter();
const ruleUser = reactive({
  accountStatus: computed(() => {
    if (form.userAccount == "") {
      return "warning";
    }
    return (loginRule.userAccount as RegExp).test(form.userAccount as string)
      ? "success"
      : "error";
  }),
  passwordStatus: computed(() => {
    if (form.userPassword == "") {
      return "warning";
    }
    return (loginRule.userPassword as RegExp).test(form.userPassword as string)
      ? "success"
      : "error";
  }),
});

const loginRule = reactive({
  userAccount: /^[0-9A-Za-z]{10,16}$/,
  userPassword:
    /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/,
});

function checkRuleAccount() {
  if (form.userAccount == "") {
    return false;
  }
  if ((loginRule.userAccount as RegExp).test(form.userAccount as string)) {
    return true;
  } else {
    return false;
  }
}

function checkRulePassword() {
  if (form.userPassword == "") {
    return false;
  }
  if ((loginRule.userPassword as RegExp).test(form.userPassword as string)) {
    return true;
  } else {
    return false;
  }
}

async function userLogin() {
  if (!isRead.value) {
    message.error("请打√,确认你是真人");
    return;
  }
  if (checkRuleAccount() && checkRulePassword()) {
    const cancelablePromise = await UserControllerService.userLoginUsingPost(
      form as UserLoginRequest
    );
    if (cancelablePromise.code === 0) {
      loginUser.value = cancelablePromise.data;
      message.success("登录成功");
      await router.replace(String(defaultRoutes.value[0]));
    } else {
      message.error("登录失败,账号或密码错误");
    }
  } else {
    if (form.userAccount == "") {
      message.error("账号不能为空");
      return;
    } else if (form.userPassword == "") {
      message.error("密码不能为空");
      return;
    }
    message.error("账号密码的格式有问题");
  }
}
</script>
<template>
  <a-row>
    <a-col :span="10" :offset="7" class="login-page">
      <a-space direction="vertical" size="large" style="width: 100%">
        <h1>请登录</h1>
        <a-form :model="form" :layout="'vertical'">
          <a-form-item
            field="userAccount"
            label="账号:"
            :help="'请输入10-16位含数字字或母的账号'"
            :validate-status="ruleUser.accountStatus"
          >
            <a-input
              class="input"
              v-model="form.userAccount"
              oncopy="return false"
              placeholder="请输入你的账号"
            />
          </a-form-item>
          <a-form-item
            field="userPassword"
            label="密码:"
            :help="'请输入至少六个字符,包含大写字母,小写字母,数字,特殊字符的密码'"
            :validate-status="ruleUser.passwordStatus"
          >
            <a-input
              class="input"
              v-model="form.userPassword"
              type="password"
              oncopy="return false"
              placeholder="请输入你的密码"
            />
          </a-form-item>

          <a-form-item field="isRead">
            <a-checkbox class="checkbox" v-model="isRead">
              请打一个√,让我看看你是否是真人
            </a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button class="button" @click="userLogin" type="primary"
              >登录
            </a-button>
          </a-form-item>
          <span class="goToRegister" @click="router.push('/register')"
            >没有账号,创建一个账号</span
          >
        </a-form>
      </a-space>
    </a-col>
  </a-row>
</template>

<style scoped>
.login-page {
  background-color: white;
  padding: 40px;
  border-radius: 1ch;
  border: 1px solid #f5f5f5;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  width: 100%;
  margin: 0 0 15px;
  padding: 10px 10px 5px 10px;
  box-sizing: border-box;
  font-size: 20px;
  border-radius: 1ch;
  border: 1px solid #f5f5f5;
}

.button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  width: 100%;
  border: 0;
  padding: 15px;
  font-size: 14px;
  cursor: pointer;
  height: 40px;
  border-radius: 1ch;
}

.button:active {
  background: #74c0fc;
}

.goToRegister {
  text-decoration: underline;
  color: #8c8c8c;
  text-align: center;
  width: 100%;
  cursor: pointer;
}

.goToRegister:hover {
  color: black;
}
</style>
